<template>
  <div class="discuList">
    <div
      class="discussion-userInfo"
      v-for="(commit, i) in editorStore.list[current]"
      :key="i"
    >
      <div class="disc-header">
        <div class="disc-left">
          <img class="left-avatar" v-if="commit.avatar" :src="commit.avatar" alt="" />
          <div v-else class="left-avatar"></div>
          <div class="left-user">{{ commit.username }}</div>
        </div>
      </div>
      <div class="disc-content" v-html="commit.content"></div>
      <CommentActions
        :isShow="true"
        :commit="commit"
        :current="current"
        @like="handleLike"
      ></CommentActions>
      <!-- 回复部分 -->
      <div class="disc-comment" v-if="commit?.children?.length > 0">
        <div class="disc-box-item" v-for="(c, i) in commit?.children" :key="i">
          <div class="disc-header">
            <div class="disc-left">
              <img class="left-avatar" v-if="c.avatar" :src="c.avatar" alt="" />
              <div v-else class="left-avatar"></div>
              <div class="left-user">{{ c.username }}</div>
            </div>
          </div>
          <div class="disc-content" v-html="c.content"></div>
          <CommentActions
            :isShow="true"
            :commit="c"
            :current="current"
            @like="handleLike"
          ></CommentActions>
        </div>
        <!-- <div class="load-more">
          <span class="lable"> 展开其他{{ commit?.children?.length }}条回复 </span>
          <el-icon style="color: #1e8fda">
            <ArrowDown></ArrowDown>
          </el-icon>
        </div> -->
        <!-- 加载显示更多 -->
      </div>
    </div>
    <!-- 展示全部 -->
    <div
      v-if="
        isNeed && editorStore.referenceAnalysisComments.discussionCommentsList.length > 0
      "
    >
      <el-divider />
      <div class="openAll">
        <div class="all">
          <span>查看全部评论</span>
          <el-icon>
            <ArrowDown />
          </el-icon>
        </div>
      </div>
    </div>
    <!-- {{commit}} -->
  </div>
</template>
<script setup>
import { getCommentLike } from "@/service/exam";
import CommentActions from "@/components/Comment/commentAction.vue";
import { userEditorStore } from "@/stores/editor.js";
const editorStore = userEditorStore();
import { useExam } from "@/stores/exam.js";
const examStore = useExam();

const props = defineProps({
  current: {
    type: Number,
  },
  isNeed: {
    type: Boolean,
    default: true,
  },
  commit: {
    type: Object,
    default: () => ({
      username: "",
      content: "",
      replies: [],
      id: "",
    }),
  },
});
const emit = defineEmits(["openAll"]);

watch(
  () => examStore.currQuestion.id,
  () => {
    editorStore.getCommentListFn(props.current);
  },
  { immediate: true }
);

// 点赞事件
const handleLike = async (id) => {
  console.log(id, "commit");
  const res = await getCommentLike({ logid: id, type: 2 });
  if (res.code == "000000") {
    // ElMessage.success(commit.is_like ? '点赞成功' : '取消点赞')
    editorStore.getCommentListFn(props.current);
  }
};
</script>
<style lang="scss" scoped>
.discussion-userInfo {
  // margin-top: 10px;
  margin-top: 20px;

  .disc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .disc-left {
    display: flex;
    gap: 10px;
    align-items: center;

    .left-avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background-color: #4673a2;
    }

    .left-user {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 600;
      line-height: 22.4px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;

      color: #000;
    }

    .left-updateTime {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 400;
      line-height: 19.6px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;

      color: #999;
    }

    .left-commitType {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 400;
      line-height: 19.6px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      padding: 4px;
      border-radius: 8px;

      &.tiwen {
        color: #ffffff;
        background-color: #1e8fda;
      }

      &.huifu {
        color: #fff;
        background-color: #13cd5e;
      }
    }
  }

  .disc-right {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: left;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-underline-position: from-font;
    text-decoration-skip-ink: auto;
    color: #e52121;

    &.zhuiwen {
      color: #126983;
    }
  }

  // 回复内容部分
  .disc-content {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
  }

  .disc-comment {
    padding: 10px 0px 0px 20px;
    // background: #1269830d;
  }

  .load-more {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1e8fda;
    display: flex;
    align-items: center;
    cursor: pointer;

    .label {
      margin-right: 5px;
    }
  }
}

.openAll {
  display: flex;
  justify-content: center;
  // height: 22px;
  padding-bottom: 15px;

  .all {
    display: flex;
    gap: 10px;
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    color: #333;
  }
}
</style>
